<template>
    <el-row>
        数量： {{ state.data.length }}
    </el-row>
    <el-table :data="state.data" height="900" 
    @sort-change="sortChange"
    @cell-click="cellClick"
    :cell-class-name="tableCellClassName"
    :default-sort="state.sort"
    style="width: 100%">
        <el-table-column prop="date" label="date"  width="210" sortable/>
        <el-table-column prop="category" label="类别" width="100"/>
        <el-table-column prop="stock" label="股票" width="160" />
        <el-table-column prop="industry" label="industry" width="160"/>
        <el-table-column prop="display" label="display" width="120">
            <template #default="scope">
                <ToDDisplay :stock="scope.row.stock" :date="scope.row.date" />
            </template>
        </el-table-column>
        <el-table-column prop="lp" label="lp"  width="100" sortable/>
        <el-table-column prop="drawdown" label="drawdown"  width="100" sortable/>
    </el-table>
</template>

<script setup>
import { reactive } from 'vue';
import { getLpClassName } from '../utils/help';
import ToDDisplay from './element/ToDDisplay.vue';
import { useRouteQuery } from '../utils/useRoute';
import { getDailyDrawdownData } from '../service/daily';

const base = "DailyDrawDownSat"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"
const selectedKey = base + "Selected"

const state = reactive({
    rawData: [],
    data: [],
    selected: "",
    operationSelected: "",
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || '' , 
        order: sessionStorage.getItem(sortOrderKey) || '' 
    }
})

let year = useRouteQuery('year',"")

getDailyDrawdownData().then(res => {
    state.rawData = res.data
    state.data = res.data
})

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (columnProperty == "lp") {
        return getLpClassName(val)
    }

    if (["nextWeekPct","weekPct"].includes(columnProperty)) {
        if (val < 0) {
            return "lt0-cell"
        }
    }
}

const filterCategory = (value, row) => {
    return row.category === value
}

const cellClick = (row, column, cell, event) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (['stock','industry','date','minDate','maxDate','curPct','cur60wPct','nextWeekPct','category'].includes(columnProperty)) {
        if (state.operationSelected != "" && state.operationSelected == val) {
            state.operationSelected = ""
            state.data = state.rawData
        } else {
            state.operationSelected = val
            if (["curPct","cur60wPct","nextWeekPct"].includes(columnProperty)) {
                if (val >= 0) {
                    state.data = state.rawData.filter(item => item[columnProperty] >= 0)
                } else {
                    state.data = state.rawData.filter(item => item[columnProperty] < 0)
                }
            } else {
                state.data = state.rawData.filter(item => item[columnProperty] == val)
                if (columnProperty == 'date') {
                    state.selected = state.operationSelected
                } else {
                    state.selected = ""
                }
            }
        }
    }
}
</script>

<style>
</style>